<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
    <title>听歌</title>
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="#" />
</head>

<body>
    <section>
        <div class="first">
            <div class="loading">
                <div class="man imgWrap">
                    <img src="./images/protagonist.png" alt="">
                </div>
                <div class="rocket imgWrap">
                    <img src="./images/arrow.png" alt="">
                </div>
                <div class="tip wow bounceIn imgWrap">
                    <img src="./images/pleaseWearEar.png" alt="">
                </div>
                <div class="jump wow fadeInDown imgWrap">
                    <img src="./images/jump.png" alt="">
                </div>
                <div class="progressNow">
                    <div class="text">
                        Loading : <span>0%</span>
                    </div>
                </div>
            </div>

            <div class="start">
                <div class="kugouLogo imgWrap">
                    <img src="./images/kuGouLog.png" alt="">
                </div>
                <div class="light1"></div>
                <div class="light2"></div>
                <div class="light3"></div>
                <div class="light4"></div>
                <div class="light5"></div>
                <div class="light6"></div>
                <div class="startTitle imgWrap">
                    <img src="./images/galSong.png" alt="">
                </div>
                <div class="mouse-box ">
                    <div class="mouse imgWrap">
                        <img src="./images/mouse.png" alt="">
                    </div>
                    <div class="dog imgWrap">
                        <img src="./images/whatSong.png" alt="">
                    </div>
                </div>
                <div class="leftMan imgWrap">
                    <img src="./images/left-man.png" alt="">
                </div>
                <div class="rightMan imgWrap">
                    <img src="./images/right-man.png" class="what" alt="">
                </div>
                <div class="question imgWrap wow headShake">
                    <img src="./images/question.png" alt="">
                </div>
                <div class="startButton imgWrap wow tada " data-wow-iteration="infinite" data-wow-duration="1s">
                    <img src="./images/nowButton .png" alt="">
                </div>
                <div class="erro1 imgWrap">
                    <img src="./images/what.png" alt="">
                </div>
                <div class="erro2 imgWrap">
                    <img src="./images/what.png" alt="">
                </div>
                <div class="erro3 imgWrap">
                    <img src="./images/what.png" alt="">
                </div>
                <div class="erro4 imgWrap">
                    <img src="./images/what.png" alt="">
                </div>
            </div>
            <class class="main">
                <div class="swiper-container">
                    <div class="swiper-wrapper swiper-no-swiping">
                        <div class="swiper-slide">
                            <div class="filmSong">
                                <div class="whatLove imgWrap ani" swiper-animate-effect="bounceInDown"
                                    swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
                                    <img src="./images/filmWhatLove.png" alt="">
                                </div>
                                <div class="filmPerson imgWrap ani" swiper-animate-effect="bounceInDown"
                                    swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                                    <img src="./images/monkey.png" alt="">
                                </div>
                                <div class="circleBc">
                                    <div class="circleBox ">
                                        <div class="item1Bc"></div>
                                        <div class="item2Bc"></div>
                                        <div class="item3Bc"></div>
                                        <div class="item4Bc"></div>
                                        <div class="item5Bc"></div>
                                        <!-- <div class="item6Bc"></div> -->
                                    </div>

                                </div>
                                <div class="hill imgWrap">
                                    <img src="./images/film-hill.png" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="rock">
                                <div class="light1"></div>
                                <div class="light2"></div>
                                <div class="light3"></div>
                                <div class="light4"></div>
                                <div class="light5"></div>
                                <div class="light6"></div>
                                <div class="rockEarth imgWrap">
                                    <img src="./images/rock-earth.png" alt="">
                                </div>
                                <div class="man imgWrap ani" swiper-animate-effect="zoomIn"
                                    swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                                    <img src="./images/rock-man.png" alt="">
                                </div>
                                <div class="leftMan imgWrap">
                                    <img src="./images/rock-left.png" alt="">
                                </div>
                                <div class="rightMan imgWrap">
                                    <img src="./images/rock-right.png" alt="">
                                </div>
                                <div class="stage imgWrap">
                                    <img src="./images/rock-carpet.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="bath">
                                <div class="circleBc">
                                    <div class="circleBox">
                                        <div class="item1Bc"></div>
                                        <div class="item2Bc"></div>
                                        <div class="item3Bc"></div>
                                        <div class="item4Bc"></div>
                                        <div class="item5Bc"></div>
                                        <div class="item6Bc"></div>
                                        <div class="item7Bc"></div>
                                    </div>

                                </div>
                                <div class="bathEarth imgWrap">
                                    <img src="./images/rock-earth.png" alt="">
                                </div>
                                <div class="manTwo imgWrap ani" swiper-animate-effect="bounceInLeft"
                                    swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
                                    <img src="./images/bathMan2.png" alt="">

                                </div>
                                <div class="board1 imgWrap">
                                    <img src="./images/bathBorad1.png" alt="">
                                </div>
                                <div class="manOne imgWrap">
                                    <!-- 第一个人 -->
                                    <img src="./images/bathMan1.png" alt="">
                                </div>
                                <div class="board2 imgWrap">
                                    <!-- 遮挡2 -->
                                    <img src="./images/bathBorad2.png" alt="">
                                </div>

                                <div class="bathBottom imgWrap">
                                    <!-- 浴室地板 -->
                                    <img src="./images/bathBottom.png" alt="">
                                </div>
                                <div class="bathSoap imgWrap ani" swiper-animate-effect="bathSoapA"
                                    swiper-animate-duration=".3s" swiper-animate-delay="0.1s">
                                    <!-- 肥皂 -->
                                    <!-- swiper-animate-effect="fadeInUp"  -->
                                    <img src="./images/soap.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="car">
                                <div class="circleBc">
                                    <div class="circleBox">
                                        <div class="item1Bc"></div>
                                        <div class="item2Bc"></div>
                                        <div class="item3Bc"></div>
                                        <div class="item4Bc"></div>
                                        <div class="item5Bc"></div>
                                        <div class="item6Bc"></div>
                                    </div>
                                </div>
                                <div class="carEarth imgWrap">
                                    <img src="./images/rock-earth.png" alt="">
                                </div>
                                <div class="has imgWrap ani" swiper-animate-effect="hasScale"
                                    swiper-animate-duration="1s" swiper-animate-delay="0.1s">
                                    <img src="./images/has.png" alt="">
                                </div>
                                <div class="carModel imgWrap ani" swiper-animate-effect="carRound"
                                    swiper-animate-duration="1s" swiper-animate-delay="0.1s">
                                    <img src="./images/carCar.png" alt="">
                                </div>
                                <div class="rose imgWrap">
                                    <img src="./images/carRose.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="old">
                                <div class="circleBc">
                                    <div class="circleBox">
                                        <div class="item1Bc"></div>
                                        <div class="item2Bc"></div>
                                        <div class="item3Bc"></div>
                                        <div class="item4Bc"></div>
                                        <div class="item5Bc"></div>
                                        <div class="item6Bc"></div>
                                        <div class="item7Bc"></div>
                                    </div>
                                </div>
                                <div class="oldEarth imgWrap">
                                    <img src="./images/old-earth.png" alt="">
                                </div>
                                <div class="older imgWrap">
                                    <img src="./images/old-older.png" alt="">
                                </div>
                                <div class="flower imgWrap ani" swiper-animate-effect="hasScale"
                                    swiper-animate-duration="1s" swiper-animate-delay="0.1s">
                                    <img src="./images/old-flower.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="fashion">
                                <div class="fashionTitle imgWrap ani" swiper-animate-effect="zoomIn"
                                    swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                                    <img src="./images/fashion-courage.png" alt="">
                                </div>
                                <div class="fashionLeft imgWrap ani" swiper-animate-effect="fadeInLeft"
                                    swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
                                    <img src="./images/fashion-left.png" alt="">
                                </div>
                                <div class="fashionRight imgWrap">
                                    <img src="./images/fashion-right.png" alt="">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="musicPlay">
                    <audio src="" loop></audio>
                </div>
            </class>
            <div class="end">
                <div class="lbox">
                    <div class="light1"></div>
                    <div class="light2"></div>
                    <div class="light3"></div>
                    <div class="light4"></div>
                    <div class="light5"></div>
                    <div class="light6"></div>
                </div>

                <div class="title">
                    <div class="title-left imgWrap">
                        <div class="content">
                            <div class="content-left imgWrap">
                                <img src="./images/arrow.png" alt="">
                            </div>
                            <div class="content-right">love</div>
                        </div>
                    </div>
                    <div class="title-right imgWrap">
                        <img src="./images/kuGouLog.png" alt="">
                    </div>
                </div>
                <div class="grading imgWrap">
                    <img src="./images/grade0.png" alt="">
                </div>
                <div class="good ">
                    <div class="good-text">猜中8首</div>
                </div>
                <div class="detail-box">
                    <div class="detail">
                        <div class="detail-text">
                            是天性压抑了太久，还是一个人寂寞到癫狂？我们的题库都不够你做了啊！行走的中华小曲库，快晒结果独孤求败吧！

                        </div>
                    </div>
                </div>
                <div class="challenge clearFix ">
                    <div class="challenge-left fl"></div>
                    <div class="challenge-right fr"></div>
                </div>
                <div class="friendRank">
                    <div class="friendRankBox"></div>
                </div>

            </div>
        </div>



        <div class="timeTip">
            兄弟你太快了
        </div>
        <div class="questionAnswer">
            <ul>
                <li>
                    <div class="text"></div>
                </li>
                <li>
                    <div class="text"></div>
                </li>
                <li>
                    <div class="text"></div>
                </li>
            </ul>
            <div class="next">
            </div>
            <div class="mouseTime">
                <div class="timeText">
                    60s
                </div>
            </div>
        </div>
        </div>

    </section>
    <script src="https://cdn.bootcdn.net/ajax/libs/PreloadJS/1.0.1/preloadjs.js"></script>
    <script src="./js/rem.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js"></script>
    <!-- <script src="./js/swiper.min.js"></script>   -->
    <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
    <script src="./js/swiper.animate.min.js"></script>
    <script>
     
    </script>
    <script src="./js/index.js"></script>
    <script>
        wow = new WOW().init()

    </script>

</body>

</html>